Improving you Plugin’s UX by adding Labels to Post Titles

When your plugin has custom post types or is extending the regular pages or posts, you can improve the overall user experience just by adding a label (post state) to the post title. In this short tutorial, you’ll learn how to do that.

If you’re still not clear on what I am talking about, you can see other plugins doing just that. Such as Elementor for example. They add the label Elementor next to each page title so you know which page was built by Elementor.

If you have ever tried to write posts and not finish them, you might see a simple Draft next to them. WordPress does that also on pages where it tells you if a page is a Posts Page and a Front Page.

A post type can have more than one label to them so you don’t have to worry of overriding a label from WordPress core or from another plugin.

Post State Filter

The filter that we have to use to add our own custom post states (labels) is:

display_post_states

You can find this filter by going into wp-admin/includes/template.php. At the time of writing this tutorial, the line where the filter is positioned is 1777 .

The complete code of that line is:

$post_states = apply_filters( 'display_post_states', $post_states, $post );

It was introduced in WordPress 2.8.0 version and the parameter $post was added in WordPress 3.6.0.

Adding your own Post State (Label)

To add your own post state (label), you need to hook your function to it, add your own to the array of states and return the array.

I would also recommend to use an array key when adding your state, just in case you need to remove that (or someone else).

For this example, we will use WooCommerce Product. We will check if the current product is on sale and then add the state On Sale.

And now if you place a Product on sale, you will see the new On Sale post state (label).

Various Example of usages

This can be used for various things, as you might expect. If you work with custom post types, you might already have a few ideas.

Post Statuses

One of my ideas, is to use the post states in my own plugin Simple Giveaways. Since I use a few post statuses, I will show the post statuses as post states also.

So, when you view all your giveaways you will see which giveaway has ended and such without having to click on each post status.

Popularity

You may count the how much views each of your posts have. Then create a threshold and add a Popular label if a post has reached the defined threshold.

Don’t add everything

You might now have various ideas on how to use that but beware that this post states (label) should be small and descriptive. You don’t want to add bunch of various states. Maybe something could come into a custom column where you can show even more data?

If you think you should be using a custom column, then I have you covered there with my article: How to add Custom Columns in WordPress with OOP.

Conclusion

WordPress is really extensible and such small details can improve the user experience of your plugin. As seen, you don’t have to have your own custom post type, you can also improve the experience of other plugins 🙂

Have you ever created your own post states (labels)? Tell us in the comments below on how you improved the user experience of a plugin.

Become a Sponsor